<template>
    <div>
        <!--回到顶部-->
    
        <a class="ba" href="#">
            <i class=" fa fa-arrow-circle-up"></i>
        </a>
        <!--头部-->
        <div class="header">
            <div style="height:2.2rem;">
                <div class="city">
                    <span class="fa fa-map-marker"></span>
                    <span style="padding:0;">{{city.slice(0,7)}}...</span>
                    <span class="fa fa-sort-desc"></span>
                </div>
                <div class="weather">
                    <div>
                        <span>{{weather}}℃</span>
                        <br>
                        <span class="one">{{temperature}}</span>
                    </div>
    
                    <img :src="'//fuss10.elemecdn.com/'+imgweather+'.png'">
                </div>
            </div>
    
            <input type="text" placeholder="搜索商家、商品">
            <div class="foot">
                <scroller lock-y scrollbar-x>
                    <div class="foot-box">
                        <span v-for="f in foot">{{f.word}}</span>
                    </div>
                </scroller>
            </div>
        </div>
    
        <!--中间 轮播图-->
        <div class="lun">
            <swiper auto loop dots-position="center">
                <swiper-item>
                    <div class="slider" v-for="(t,index) in type" :key="index" v-if="index<8">
                        <img :src="'//fuss10.elemecdn.com/'+t.image_url">
                        <li>{{t.title}}</li>
                    </div>
                </swiper-item>
                <swiper-item>
                    <div class="slider" v-for="(t,index) in type" :key="index" v-if="index>7">
                        <img :src="'//fuss10.elemecdn.com/'+t.image_url">
                        <li>{{t.title}}</li>
                    </div>
                </swiper-item>
            </swiper>
        </div>
        <div class="br"></div>
    
        <!--推荐商家-->
        <p>推荐商家</p>
        <div v-for="s in shop" class="shop">
            <router-link :to="'/home/list/'+s.id">
                <img :src="s.image_path|isSrc" alt="">
                <section class="box">
    
                    <div class="box1">
                        <div class="box1-1">
                            <span class="box1-1-1">品牌</span>
                            <span class="bold">{{s.name.slice(0,9)}}...</span>
                        </div>
                        <div class="box1-2">
                            <span v-for="piao in s.supports">{{piao.icon_name}}</span>
                        </div>
                    </div>
    
                    <div class="box2">
                        <div class="box2-1">
                            <span class="star" style="font-size:0.9rem;">★★★★★</span>
                            <span>{{s.rating}}</span>
                            <span>月售{{s.distance}}单</span>
                            <br>
                        </div>
                        <div class="box2-2">
                            <span class="box2-2-1" v-if="s.delivery_mode">准时达</span>
                            <span class="box2-2-2" v-if="s.delivery_mode">蜂鸟专送</span>
                            <br>
                        </div>
                    </div>
    
                    <div class="box3">
                        <div class="box3-1">
                            <span>￥{{s.float_minimum_order_amount}}起送</span>
                            <span>{{s.piecewise_agent_fee.description}}</span>
                            <span>{{s.average_cost}}</span>
                        </div>
                        <div class="box3-2">
                            <span>1.16km /</span>
                            <span class="box3-2-2">22分钟</span>
                        </div>
                    </div>
                </section>
            </router-link>
        </div>
    
    </div>
</template>

<script>
import Geohash from "../public/geohash.js";
import { Scroller } from 'vux'
import { Swiper, SwiperItem } from 'vux'
export default {
    data() {
        return {
            city: "",
            temperature: "",
            weather: "",
            imgweather: "",
            foot: [],
            type: [],
            shop: [],
            latitude: 31.23037,
            longitude: 121.473701,
        }
    },
    computed: {
        //根据经纬度计算geohash
        gh: function () {
            return Geohash.encode(this.latitude, this.longitude, 12);
        }
    },
    components: {
        Scroller,
        Swiper,
        SwiperItem
    },
    methods: {
        getCity() {
            this.$http.get("/myelm/v2/pois/"+this.gh)
                .then(function (res) {
                    // console.log(res.body)
                    this.city = res.body.address
                })
        },
        getWeather() {
            this.$http.get("/myelm/bgs/weather/current?latitude=31.23037&longitude=121.473701")
                .then(function (res) {
                    // console.log(res.body)
                    this.temperature = res.body.description
                    this.weather = res.body.temperature
                    this.imgweather = res.body.image_hash
                    // console.log(res.body.image_hash)
                })
        },
        getFoot() {

            this.$http.get("/myelm/shopping/v3/hot_search_words?latitude=31.23037&longitude=121.473701")
                .then(function (res) {
                    // console.log(res.body)
                    this.foot = res.body
                })
        },
        getType() {
            this.$http.get("/myelm/v2/index_entry?geohash=ww0vsc6q2u2&group_type=1&flags[]=F")
                .then(function (res) {
                    console.log(res.body)
                    this.type = res.body
                })
        },
        GetShop() {
            this.$http.get("/myelm/shopping/restaurants?latitude=31.23037&longitude=121.473701&limit=20&offset=0&extras[]=activities&terminal=h5")
                .then(function (res) {
                    console.log(res.body)
                    this.shop = res.body
                })
        }
    },
    created() {
        this.getCity()
        this.getWeather()
        this.getFoot()
        this.getType()
        this.GetShop()
    }
}

</script>

<style scoped>
.header {
    background-color: #0096FF;
    height: 6.4rem;
    padding: 0.62rem 0.9rem;
}

input {
    width: 100%;
    height: 2.25rem;
    text-align: center;
    font-size: 0.8rem;
    border-radius: 3rem;
    border: none;
    margin: 0.2rem 0;
}

.header .foot span {
    color: white;
    margin-right: 0.6rem;
    padding-bottom: 0.8rem;
}

.header .city {
    float: left;
    line-height: 1.34rem;
    font-size: 1.1rem;
    color: white;
    margin-top: 0.7rem;
}

.header .weather {
    float: right;
    color: white;
    font-size: 0.8rem;
}

.header .weather div {
    float: left;
    text-align: right;
}

.header .weather img {
    width: 2rem;
    padding-top: 0.5rem;
}




/*.header .weather .one {
        margin-right: 2rem;
    }*/

.header .foot {
    width: 100%;
    /*display: inline-block;*/
    white-space: nowrap;
}

.header .foot .foot-box {
    width: 28rem;
}

.lun {
    height: 11rem;
}

.lun .slider {
    float: left;
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    padding: 0.5rem;
}

.lun img {
    width: 2.8rem;
    height: 2.8rem;
}

.br {
    height: 0.62rem;
    width: 100%;
    background-color: #F4F4F4;
}

p {
    font-size: 0.9rem;
    margin: 0.3rem 1rem;
    font-weight: bold;
}

.shop {
    border-top: 1px solid #E6E6E6;
    height: 5.6rem;
    color: #666666;
}

.shop img {
    width: 3.75rem;
    height: 3.75rem;
    float: left;
    position: absolute;
    left: 0;
    margin: 0.95rem;
}

.box {
    height: 3.75rem;
    padding: 0.95rem;
}

.box1 {
    margin-left: 5rem;
    color: #666666;
}

.box1 .box1-1 {
    float: left;
    font-size: 1rem;
}

.box1 .box1-1 .bold {
    font-weight: bold;
    color: black;
    font-size: 0.9rem;
}

.box1 .box1-1 .box1-1-1 {
    font-size: 0.8rem;
    color: black;
    background-color: #FFD930;
}

.box1 .box1-2 {
    float: right;
    margin-top: 0.3rem;
}

.box1 .box1-2 span {
    margin-left: 0.2rem;
    border: 1px solid #EEEEEE;
    color: #999999;
}

.box2 {
    margin-left: 5rem;
    color: #666666;
    font-size: 0.6rem;
}

.box2 .box2-1 {
    float: left;
    font-size: 0.65rem;
}

.box2 .box2-2 {
    margin-top: 0.3rem;
    float: right;
    font-size: 0.6rem;
    margin-right: 0.2rem;
}

.box2 .box2-2 .box2-2-1 {
    border: 1px solid #2395FF;
    color: #2395FF;
    border-radius: 3px;
}

.box2 .box2-2 .box2-2-2 {
    background-color: #2395FF;
    color: white;
    padding: 0 0.2rem;
    border-radius: 2px;
}

.box3 {
    float: left;
    margin-left: 5rem;
    color: #666666;
    width: 78%;
}

.box3 .box3-1 {
    float: left;

    font-size: 0.45rem;
}

.box3 .box3-2 {
    float: right;
    font-size: 0.45rem;
    margin-right: 0.3rem;
}

.box3 .box3-2 .box3-2-2 {
    color: #2395FF;
}

.ba {
    font-size: 3rem;
    color: grey;
    position: fixed;
    right: 1rem;
    bottom: 3rem;
}

.shop .box .left {
    float: left;
}

.shop .box .time {
    float: right;
    margin-right: 0.5rem;
    margin-top: 2rem;
}

.shop .box div .star {
    color: orange;
}

.shop .box div span {
    margin-top: 0.4rem;
}
</style>